<template>
  <section class="detail-container">
    <section class="detail-wrapper">
      <section class="img">
        <n-image width="480" :src="product.detail.img"></n-image>
      </section>
      <section class="product-info-wrapper">
        <section class="product-title">{{ product.detail.title }}</section>
        <section class="keywords-wrapper">
          <section style="font-size: 14px;color: #22c35b;margin-right: 5px;">[ Cloud米米自营 ]</section>
          <section
            class="product-keyword-item"
            v-for="word in product.detail.keywords.split(';')"
          >{{ word }}</section>
        </section>
        <section class="price-title">
          <span style="font-weight: 500;">{{ chooseType.sku_price }} 元</span>
        </section>
        <n-divider></n-divider>
        <Address class="address"></Address>
        <section class="sku-title">选择类型</section>
        <section class="sku-wrapper">
          <section
            @click="() => setupChooseIdx(index)"
            :class="{ active: index === skuIdx }"
            class="sku"
            v-for="(sku, index) in product.detail.sku_data"
          >{{ sku.sku_title }}</section>
        </section>
        <section class="clac-wrapper">
          <section class="clac-title">
            <section class="type">{{ product.detail.title }} | {{ chooseType.sku_title }}</section>
            <section class="sub-price">{{ chooseType.sku_price }}元</section>
          </section>
          <section class="total-price">总计: {{ chooseType.sku_price }}元</section>
        </section>
        <n-button
          v-permission:click="() => addCart(product.detail)"
          class="cart-button"
          type="primary"
        >加入购物车</n-button>
        <section class="service-desc">
          <section class="desc" v-for="desc in descriptions">
            <n-icon class="desc-icon" size="16">
              <DoneTwotone />
            </n-icon>
            {{ desc }}
          </section>
        </section>
      </section>
    </section>
  </section>
</template>
<script setup lang="ts">
import Address from '../Address.vue';
import { ref, computed } from '@vue/reactivity';
import { DoneTwotone } from '@vicons/material';
import { addCartService } from '../../api/cartApi';
import $store from '../../store';
import { $pushRoute } from '../../utils/global';

const descriptions = [
  'Cloud米米自营',
  'Cloud米米发货',
  '7天无理由退货',
  '7天价格保护'
];
const {
  product = {},
} = defineProps({
  product: Object,
});
let skuIdx = ref(0);
const chooseType = computed<any>(() => product.detail.sku_data[skuIdx.value] || {});
function setupChooseIdx(idx: number) {
  skuIdx.value = idx;
}
const addCart = (product: any) => {
  addCartService({
    goods_id: product.pro_no,
    goods_skuId: chooseType.value.sku_id,
  }).then((res) => {
    $store.dispatch('setCartCount', res.data || 0);
    $pushRoute('/cart');
  })
}
</script>
<style scoped>
.detail-wrapper {
  width: 1226px;
  min-width: 1226px;
  margin: 0 auto;
  margin-top: 20px;
  display: flex;
}

.img {
  margin-top: 20px;
}

.product-info-wrapper {
  margin-left: 60px;
  flex: 1;
  padding-right: 150px;
}

.product-title {
  font-size: 24px;
  line-height: 1.8;
}

.keywords-wrapper {
  display: flex;
  align-items: center;
  height: 30px;
  padding: 10px 0;
}

.product-keyword-item {
  margin-right: 6px;
  color: #3f3f3f;
}

.product-keyword-item + .product-keyword-item::before {
  content: "|";
  margin-right: 5px;
  color: #3f3f3f;
}

.price-title {
  display: flex;
  flex-direction: column;
  line-height: 30px;
  color: #22c35b;
  font-size: 18px;
}

.sku-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

.sku {
  height: 45px;
  line-height: 45px;
  text-align: center;
  border-width: 1px;
  border-style: solid;
  box-sizing: border-box;
  user-select: none;
  color: #3f3f3faa;
  white-space: nowrap;
  padding: 0 5px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sku:hover {
  color: #22c35b;
  cursor: pointer;
}

.sku.active {
  color: #22c35b;
  border-width: 2px;
  font-weight: 600;
}

.sku-title {
  font-size: 18px;
  font-weight: 200;
  margin-top: 20px;
  margin-bottom: 5px;
}

.clac-wrapper {
  background-color: #f3f3f3;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 15px 20px 20px;
  margin-top: 20px;
}

.clac-title {
  line-height: 50px;
  display: flex;
  justify-content: space-between;
  color: #616161;
}

.total-price {
  color: #22c35b;
  font-size: 22px;
}

.cart-button {
  width: 300px;
  height: 60px;
  margin-top: 20px;
  border-radius: 0;
}

.service-desc {
  margin-bottom: 40px;
}

.desc {
  display: inline-block;
  margin-right: 30px;
  color: #616161;
  font-size: 16px;
  margin-top: 20px;
}

.desc-icon {
  vertical-align: -2px;
  border-style: solid;
  border-width: 2px;
  border-radius: 50%;
  font-weight: 600;
}
</style>